<template>
  <div class="blocks">
      <div @click="turn(block)" class="block" v-for="(block,index) in blocks" :key="index" :class="{act:block.active}">
        <span class="iconfont" :class="block.icon"></span>
        <div class="desc">
          <span class="info">{{block.info}}</span>
          <span class="name">{{block.name}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    turn (block) {
      this.blocks.forEach(block => {
        this.$set(block, 'active', false)
      })
      this.$set(block, 'active', true)
      if (block.path) {
        this.$router.push(block.path)
      }
    }
  },
  props: {
    blocks: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped lang="stylus">
  .blocks
    display flex
    flex-direction row
    justify-content space-between
    flex-wrap wrap
    background-color #F5F4F7
    .block
      display flex
      flex-direction column
      justify-content center
      width 2.8rem
      height 3.67rem
      background rgba(255,255,255,1);
      border-radius 0.27rem
      margin-bottom 0.24rem
      box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
      .iconfont
        color #F9A528
        margin-left 0.35rem
        dpr-font(33px)
      .desc
        margin-top 17px
        margin-left 0.35rem
        display flex
        flex-direction column
        .info
          color #B9B7C0
          dpr-font(10px)
        .name
          margin-top 0.16rem
          color #55545D
          dpr-font(12px)
      &.act
        background:rgba(249,165,40,1);
        .desc
          .name,.info
            color:rgba(255,255,255,1);
        .iconfont
          color #FFFFFF
</style>
